<template>
  <a-card title="合同配置模板" size="small" class="ct-list">
    <template #extra>
      <a-button
        type="primary"
        @click="newTemplate()"
        v-permission="['contractTemplateList', 'curd', 'add']"
      >
        <template #icon>
          <PlusOutlined />
        </template>
        新增模板
      </a-button>
    </template>

    <a-table
      sticky
      :dataSource="dataList"
      :columns="COLUMNS"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      rowKey="id"
      :scroll="{ x: 'max-content' }"
    >
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'endDate'">
          <span>{{ record.date_flag ? "永久" : record.timeout_time }}</span>
        </template>
        <template v-if="column.key === 'status'">
          <a-switch
            checked-children="开"
            un-checked-children="关"
            :checked="text"
            :checkedValue="1"
            :unCheckedValue="0"
            @change="(status) => handleStatusChange(record.id, status)"
          />
        </template>
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link" @click="checkRange(record.relation_builds)">
              查看范围
            </a-button>
            <a-button
              type="link"
              @click="newTemplate({ id: text })"
              v-permission="['contractTemplateList', 'curd', 'edit']"
            >
              编辑
            </a-button>
            <a-button
              type="link"
              danger
              @click="remove(record)"
              v-permission="['contractTemplateList', 'curd', 'delete']"
            >
              删除
            </a-button>
          </a-space>
        </template>
      </template>
    </a-table>

    <CheckedHousingRange
      :visible="checkRangeVisible"
      :checkedInfo="checkedRangeInfo"
      @close="checkRangeVisible = false"
      @request="$utils.commonRequest"
    />
  </a-card>
</template>

<script>
import { defineComponent, reactive, toRefs, computed } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import request from "../../../common/utils/request";
import { message } from "ant-design-vue";
import CheckedHousingRange from "./modules/CheckedHousingRange.vue";
import utils from "../../../common/utils/utils";

export default defineComponent({
  name: "ContractTemplate",
  components: {
    PlusOutlined,
    CheckedHousingRange,
  },
  setup() {
    const router = useRouter();

    const state = reactive({
      dataList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      checkRangeVisible: false,
      checkedRangeInfo: [],
    });

    /** 新增、编辑模板 */
    const newTemplate = (query = {}) => {
      router.push({
        name: "newContractTemplate",
        query,
      });
    };

    /** 查看范围 */
    const checkRange = (checkedInfo) => {
      state.checkedRangeInfo = checkedInfo;
      state.checkRangeVisible = true;
    };

    /** 修改状态 */
    const handleStatusChange = (id, status) => {
      request
        .put("/org", "/contract/clauseTemplate/status", {
          id,
          status,
          needMsg: true,
        })
        .then((res) => {
          message.success(res.msg || "修改成功！");
          getDataList();
        });
    };

    /** 删除模板 */
    const remove = (record) => {
      utils.modalConfirm({
        content: `确定删除“${record.template_name}”合同模板吗？`,
        okType: "danger",
        onOk: () => {
          request
            .del("/org", "/contract/clauseTemplate/del", {
              id: record.id,
              needMsg: true,
            })
            .then((res) => {
              message.success(res.msg || "删除成功！");
              getDataList();
            });
        },
      });
    };

    /** 模板列表 */
    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
      showTotal: (total) => `共${total}条`,
    }));
    const handleTableChange = (pager) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getDataList();
    };
    const getDataList = (init = false) => {
      state.loading = true;
      if (init) {
        state.page = 1;
      }
      request
        .get("/org", "/contract/clauseTemplate/list", {
          page: state.page,
          limit: state.pageSize,
        })
        .then((res) => {
          state.dataList = res.list;
          state.total = res.total;
        })
        .finally(() => {
          state.loading = false;
        });
    };

    /** 初始化 */
    const init = () => {
      getDataList(true);
    };
    init();

    return {
      COLUMNS,
      pagination,
      ...toRefs(state),
      newTemplate,
      handleTableChange,
      handleStatusChange,
      checkRange,
      remove,
    };
  },
});

const COLUMNS = [
  {
    title: "模板名称",
    dataIndex: "template_name",
    key: "template_name",
  },
  {
    title: "应用项目",
    dataIndex: "villageNames",
    key: "villageNames",
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    key: "updated_at",
  },
  {
    title: "截止时间",
    dataIndex: "date_flag",
    key: "endDate",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    dataIndex: "id",
    key: "action",
  },
];
</script>

<style scoped>
.ct-list {
  margin: 10px;
  min-height: calc(100% - 20px);
}
</style>
